<template>
  <list-layout class="site-map-wrapper" :hideCrumbs="true" channel="about">
    <div class="column items-center" style="margin: 45px 0;">
      <gradient-text>{{$t('网站地图')}}</gradient-text>
    </div>
    <div class="row no-wrap q-my-xl items-start" v-for="(entry, idx) in links" :key="idx">
      <div
        class="link category cursor-pointer q-mr-xl"
        clickable
        @click="$router.push(entry.link)"
      >
        {{ $t(entry.text) }}
      </div>
      <div class="children row q-gutter-lg">
        <div
          class="link child wrap cursor-pointer"
          clickable
          v-for="(page, pidx) in entry.children || []"
          :key="pidx"
          @click="linkClicked(page)"
        >
          {{ $t(page.text) }}
        </div>
      </div>
    </div>
    <!-- <div>{{ data.info }}</div> -->
  </list-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import listLayout from '../../components/listLayout.vue';
import gradientText from '../../components/gradientText.vue';

export default {
  name: 'SiteMap',
  mixins: [mixins.ObjectDataMixin],
  components: {
    listLayout,
    gradientText,
  },
  data() {
    return {
      links: [
        {
          text: '标准库',
          link: 'standard',
          children: [
          ],
        },
        {
          text: '资源库',
          link: 'dataset',
          children: [
            {
              text: '基础资源库',
              link: 'dataset',
              filter: {
                子库: '基础资源库',
              },
            },
            {
              text: '行业资源库',
              link: 'dataset',
              filter: {
                子库: '行业资源库',
              },
            },
            {
              text: '专项解决方案',
              link: 'dataset',
              filter: {
                子库: '专项解决方案',
              },
            },
          ],
        },
        {
          text: '工具库',
          link: 'tools',
          children: [
            {
              text: '在线检测工具',
              link: 'tools',
            },
          ],
        },
        {
          text: '标准化组织',
          link: 'stdorg',
          children: [
          ],
        },
      ],
    };
  },
  methods: {
    linkClicked(page) {
      if (this.Bus && this.Bus.$store) {
        const filter = {};
        filter[page.link] = page;

        this.Bus.$store.commit('portal/SET_FILTER', filter);
      }

      this.$router.push(page.link);
    },
  },
};
</script>

<style lang="scss" scoped>
.site-map-wrapper {
  .category, .child {
    width: 192px;
    min-width: 192px;
    font-size: 15px;
    color: white;
    height: 45px;
    line-height: 45px;
    background: #265fb3;
    // background: linear-gradient(to right, #dce5f3, #f6f9fc);
    padding: 0 16px;
    border-radius: 5px;
  }

  .child {
    background: #dce5f3;
    color: #265fb3;
  }

  .child:not(:last-child) {
    margin-right: 16px;
  }
}
</style>
